<template>
	<view class="content">
		<div class="pos-rel" v-if="detail">



			<!-- 内容 -->
			<div class="main mt-20" :style="{ paddingTop: 2 * navTop + custom.height + custom.top + 10 + 'px' }">
				<div class="detailTop">
					<div class="fontS40 font-500 text-center">{{ detail.plcTitle }}</div>
					<div class="mt-4 fontS24 color-6d text-center">{{ detail.createTime }}</div>
				</div>

				<scroll-view v-if="loading" style="white-space: normal;"
					:style="{ 'height': 'calc(100% - ' + scrollHeight + 'px)' }" scroll-y="true"
					class="mt-20 plcContent">
					<rich-text :nodes="detail.plcContent"></rich-text>
				</scroll-view>
				<div class="linkBox flex-center fontS24 color-6d">关联链接：<div class="fontE1 color-green"
						style="width: calc(100% - 130upx);" @click="openUrl">{{ detail.plcLink }}
					</div>
				</div>
			</div>
		</div>

	</view>
</template>

<script>
const App = getApp().globalData;

import {
	findPolicyDetailApp,
} from "@/api/index";



export default {

	data() {
		return {
			detail: null,
			scrollHeight: 100,
			loading: false
		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},

	async onLoad(option) {

		await this.getDetail(option.id)
		let _this = this;
		const query = uni.createSelectorQuery();
		query.select('.detailTop').boundingClientRect(function (rect) {
			console.log(rect);

			_this.scrollHeight = rect.height + uni.upx2px(80)
			_this.loading = true
		}).exec();


	},
	methods: {

		async getDetail(id) {
			const {
				data
			} = await findPolicyDetailApp(id);
			data.plcContent = data.plcContent.replace(/\n/g, '<br/>')
			// console.log(data.plcContent)
			this.detail = data

		},

		toDetail(item) {
			uni.navigateTo({
				url: `/pages/index/policyDetail?serveId=${item.serveId}`
			})
		},
		openUrl() {
			uni.navigateTo({
				url: `/pages/webView/webView?url=${this.detail.plcLink}`
			})
		}


	},
};
</script>

<style lang="less" scoped>
.content {
	height: 100vh;
	overflow: hidden;

}

.main {
	height: calc(100vh - 40upx);
	background-color: #fff;
	border-radius: 8upx;
	// width: 100%;
	padding: 40upx 30upx;
	margin: 30upx;
	position: relative;

	.linkBox {
		position: absolute;
		bottom: 40upx;
		left: 30upx;

		height: 40upx;
		width: calc(100% - 60upx);
	}
}

.plcContent {
	color: #666D80;
	line-height: 40upx;
	font-size: 28upx;
}
</style>